<template>
	<div class="right_model" :style="{ width: rightWidth }">
		<div class="right_model_item" v-if="showStretch && showContent">
		    <baseInfo></baseInfo>
		</div>
		<div class="right_model_item" v-if="showStretch && showContent">
			<camera></camera>
		</div>	
		
		<div class="stretch" @click="changeRightWidth" v-if="showStretch">
		   <img src="/img/bigScreen/016.png" alt="" v-if="rightWidth=='25%'"/>
		   <img src="/img/bigScreen/015.png" alt="" v-else/>
		</div>
	</div>	
</template>

<script>
	import bus from '@/util/bus'
	import camera from './camera.vue'
	import baseInfo from './baseInfo.vue'
	export default {
		components: {
			camera,baseInfo			
		},		
		data() {
			return {
				showStretch:true,
				showContent:true,
				rightWidth:'25%',
			}
		},
		mounted() {
			bus.$on('showFoot', (e) => {
				this.showStretch=false
			    this.rightWidth = '0%'
			})
			bus.$on('hideFoot', (e) => {				
				let that=this
				setTimeout(function(){that.showStretch=true;that.showContent=true},300)
			    this.rightWidth = '25%'
			})			
		},
		methods: {
			changeRightWidth() {
				if(this.rightWidth=='0%'){
					this.rightWidth='25%'
					let that=this
					setTimeout(function(){that.showContent=true},300)					
				}else{
					this.rightWidth='0%'
					let that=this
					that.showContent=false											
				}				
			}	
		}
	}
</script>

<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}	
	
	
	.right_model {
		position: absolute;
		height: calc(100% - 200px);
		background: rgba(45, 103, 146, .3);
		right: 0;
		top: 100px;
		z-index: 100;
		transition: width 0.5s; 
		display: flex;
		flex-direction: column;	
		.right_model_item{
			flex: 1;
		}	
	}
	.stretch{position: absolute;top: 50%;z-index: 2;margin-top: -90px;left: -20px;cursor: pointer;}
		
</style>